<!-- 饼状图 指定朝代下所有皇帝的在位时间比较 -->
<html>
<head>
    <!-- script type="text/javascript" src="jquery.min.js"></script -->
    <script type="text/javascript" src="echarts.min.js"></script>
</head>

<body>
    <div id="container" style="height:850px;"></div>
    <script>
        function setPieData(strData) {
            var myCharts = echarts.init(document.getElementById('container'));
            var strTemp = strData.split("@");
            var len = strTemp.length;
            var res = [];
            for (var i = 0; i < len; ++i) {
                var temp = strTemp[i].split(":");
                console.log(temp);
                res.push({
                    name: temp[0],
                    value: temp[1]
                });
            }

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center',
                    textStyle: {
                        fontSize: 27,
                    },
                    itemHeight: 30,
                    itemWidth : 40
                },                
                series: [{
                    name: '详细信息',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '60%'],
                    avoidLabelOverlap: true,
                    itemStyle: {
                        borderRadius: 5,
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: res
                }]
            };
            myCharts.setOption(option);
        }
        // var data = "高祖李渊:9@太宗李世民:23@高宗李治:33@中宗李显:6@睿宗李旦:2@武后临朝称制:5@中宗李显:5";;
        // setPieData(data);
    </script>
</body>

</html>